<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>其他</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/page2' }">页面2</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <el-steps
            :space="200"
            :active="activeIndex - 0"
            finish-status="success"
            status="success"
            align-center>
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
            <el-step title="步骤 4"></el-step>
          </el-steps>

          <el-tabs
            :tab-position="'left'"
            v-model="activeIndex"
            style="margin-top: 10px">
            <el-tab-pane label="步骤 1" class="animate__animated animate__bounceInRight" name="0">
              <el-divider content-position="center">提交活动信息</el-divider>
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                  <el-col :span="7">
                    <el-input
                      placeholder="请输入内容"
                      v-model="form.activeName">
                    </el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="活动时间">
                  <el-col :span="3">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="form.date1"
                      style="width: 100%">
                    </el-date-picker>
                  </el-col>
                  <el-col class="line" :span="1" style="text-align: center">-</el-col>
                  <el-col :span="3">
                    <el-time-picker
                      placeholder="选择时间"
                      v-model="form.date2"
                      style="width: 100%">
                    </el-time-picker>
                  </el-col>
                </el-form-item>
                <el-form-item label="上传文件">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="file:///D:/html.2/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-exceed="handleExceed"
                    :on-change="fileChange"
                    :auto-upload="false"
                    list-type="picture"
                    limit="1">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                </el-upload>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="sub">立即提交</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="步骤 2" name="1">
              <el-upload
                ref="upload"
                action="#"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-tab-pane>
            <el-tab-pane label="步骤 3" name="2">角色管理</el-tab-pane>
            <el-tab-pane label="步骤 4" name="3" :style="su">
              <el-button type="primary" @click="success">立即提交</el-button>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      form: {
        activeName: "",
        date1: "",
        date2: "",
      },
      su: "",
      file: {}
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //表单提交
    sub() {
      this.$axios.post(
        this.$store.state.address.url + "testDemo",
        this.form
      );
      console.log(this.form);
      this.$refs.upload.submit();
    },
    success() {
      this.su = "success";
      this.activeIndex = 4;
    },
    handleRemove(file, fileList) {
      console.log("移除的文件：" + file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    fileChange(file){
      const typeArr = ['image/png', 'image/jpeg', 'image/jpg'];
      //查找文件类型 如果不等于-1 返回true
      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
      //判断文件是否大于3M
      const isLtMb = file.size / 1024 / 1024 < 3;
      if(!isJPG){
        this.$message.warning('只能是图片！');
        this.$refs.upload.clearFiles();
        return;
      }
      if(!isLtMb){
        this.$message.warning("文件大小不能超过3M！");
        return;
      }
      this.file = file.raw
    }
  },
};
</script>

<style lang="less" scoped>
.box-card {
  height: 600px;
}
.el-row {
  margin-top: 10px;
}
.el-step {
  color: #67C23A;
}
.el-icon-check:before {
  content: "\e6da";
}
/deep/.el-upload-list__item{
  width: 312px;
}
/deep/.el-tabs__content{
  height: 100vh;
}
</style>